<template>
  <el-button link>
    <el-dropdown>
      <span>
        <!-- <el-tooltip content="个人信息" placement="left"> -->
        <el-avatar :src="assets" />
        <!-- </el-tooltip> -->
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="getOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-button>
</template>

<script setup lang="ts">
  import assets from '@/assets/img/avatar.jpg'
  import { useRouter } from 'vue-router'
  import { resetRouter } from '@/router'
  import { useAppStore } from '@/stores/modules/app'
  import { usePermissionStore } from '@/stores/modules/permission'
  const appStore = useAppStore()
  const permissionStor = usePermissionStore()
  const router = useRouter()
  const getOut = () => {
    router.push('/login')
    appStore.$reset()
    permissionStor.$reset()
    sessionStorage.removeItem('token')
    resetRouter()
  }
</script>

<style scoped lang="scss">
  :deep(.el-tooltip__trigger:focus-visible) {
    outline: unset !important;
  }
</style>
